<template>
  <div class="mod-demo-echarts" @keyup.enter.native="getDataList()">
    <!-- <el-alert
      type="warning"
      :closable="false">
    </el-alert>-->
    <!-- 待处理失事务功能单 -->
    <!-- 待处理失事务功能单 -->
    <el-row>
      <div class="topworks">
        <div>
          <img src="../../assets/img/homeimg/home_icon_pending@2x.png" alt />
        </div>
        <span>带处理事务</span>
      </div>

      <div class="chartlisteight">
        <div @click="skip1">
          <div class="eighticon">
            <!-- <i class="el-icon-share"></i> -->
            <img src="../../assets/img/homeimg/pending_icon_goods@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span>{{this.totalCount[0]}}</span>
            <div>待发货订单</div>
          </div>
        </div>
        <div @click="skip2">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_sale@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(87,181,227,1)">{{this.totalCount[1]}}</span>
            <div>待确认售后订单</div>
          </div>
        </div>
        <div @click="skip3">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_shore@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(94,216,169,1)">{{this.totalCount[2]}}</span>
            <div>待审核联盟店</div>
          </div>
        </div>
        <div @click="skip4">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_shore_goods@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(247,179,50,1)">{{this.totalCount[3]}}</span>
            <div>待审核联盟店商品</div>
          </div>
        </div>
        <div @click="skip5">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_deposit@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(244,78,78,1)">{{this.totalCount[4]}}</span>
            <div>待审核提现</div>
          </div>
        </div>
        <div @click="skip6">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_comment@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(70,168,196,1)">{{this.totalCount[5]}}</span>
            <div>待审核评论</div>
          </div>
        </div>
        <div @click="skip7">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_review@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(227,87,140,1)">{{this.totalCount[6]}}</span>
            <div>待审核追评</div>
          </div>
        </div>
        <div @click="skip8">
          <div class="eighticon">
            <img src="../../assets/img/homeimg/pending_icon_reply@2x.png" alt />
          </div>
          <div class="eightnumber">
            <span style="color:rgba(114,94,216,1);">{{this.totalCount[7]}}</span>
            <div>待审核回复</div>
          </div>
        </div>
      </div>
    </el-row>
    <!-- 快捷查询功能框 -->
    <!-- 快捷查询功能框  导航栏功能 -->
    <el-row style="width:700px;height:350px;float:left;margin-top:32px;">
      <div class="lookcheck">
        <img src="../../assets/img/homeimg/home_icon_search@2x.png" alt />
        <span class="eightlook">快捷查询</span>
      </div>

      <div class="eight-left">
        <div class="eight-border" @click="jump1">
          <div>
            <img src="../../assets/img/homeimg/search_icon_member@2x.png" alt />
          </div>
          <span class="eight-name">会员查询</span>
        </div>

        <div class="eight-border" @click="jump2">
          <div>
            <img src="../../assets/img/homeimg/search_icon_relation@2x.png" alt />
          </div>
          <span class="eight-name">会员关系查询</span>
        </div>

        <div class="eight-border" @click="jump3">
          <div>
            <img src="../../assets/img/homeimg/search_icon_invite@2x.png" alt />
          </div>
          <span class="eight-name">邀请关系查询</span>
        </div>

        <div class="eight-border" @click="jump4">
          <div>
            <img src="../../assets/img/homeimg/search_icon_shopping@2x.png" alt />
          </div>
          <span class="eight-name">商城订单查询</span>
        </div>

        <div class="eight-border" @click="jump5">
          <div>
            <img src="../../assets/img/homeimg/search_icon_shore@2x.png" alt />
          </div>
          <span class="eight-name">联盟店订单查询</span>
        </div>

        <div class="eight-border" @click="jump6">
          <div>
            <img src="../../assets/img/homeimg/search_icon_integral@2x.png" alt />
          </div>
          <span class="eight-name">积分明细查询</span>
        </div>

        <div class="eight-border" @click="jump7">
          <div>
            <img src="../../assets/img/homeimg/search_icon_commission@2x.png" alt />
          </div>
          <span class="eight-name">会员佣金查询</span>
        </div>

        <div class="eight-border" @click="jump8">
          <div>
            <img src="../../assets/img/homeimg/search_icon_deposit@2x.png" alt />
          </div>
          <span class="eight-name">提现记录查询</span>
        </div>
      </div>
    </el-row>
    <!-- 快捷操作功能框 -->
    <!-- 快捷操作功能框 导航栏功能栏 -->
    <el-row style="width:804px;height:350px;float:right;margin-top:32px;">
      <div class="lookcheckright">
        <img src="../../assets/img/homeimg/home_icon_search@2x.png" alt />
        <span class="eightlook">快捷操作</span>
      </div>
      <div style="padding-top:-10px;">
        <div class="eight-right">
          <div @click="jump9">
            <div class="eight-right-i">
              <img src="../../assets/img/homeimg/operation_icon_add@2x.png" alt />
            </div>
            <span class="eight-right-s">新增商品</span>
          </div>

          <div @click="jump10">
            <div class="eight-right-i">
              <img src="../../assets/img/homeimg/operation_icon_special@2x.png" alt />
            </div>
            <span class="eight-right-s">专题管理</span>
          </div>
          <div @click="jump11">
            <div class="eight-right-i">
              <img src="../../assets/img/homeimg/operation_icon_deliver@2x.png" alt />
            </div>
            <span class="eight-right-s">订单发货</span>
          </div>
          <div @click="jump12">
            <div class="eight-right-i">
              <img src="../../assets/img/homeimg/operation_icon_integral@2x.png" alt />
            </div>
            <span class="eight-right-s">积分修改</span>
          </div>
          <div @click="jump13">
            <div class="eight-right-i">
              <img src="../../assets/img/homeimg/operation_icon_remit@2x.png" alt />
            </div>
            <span class="eight-right-s">运营打款</span>
          </div>
          <div @click="jump14">
            <div class="eight-right-i">
              <img src="../../assets/img/homeimg/operation_icon_deposit@2x.png" alt />
            </div>
            <span class="eight-right-s">提现审核</span>
          </div>
        </div>
      </div>
    </el-row>

    <!-- 数据概览功能模块    图标功能开发 折线图功能区域 多组数据-->
    <!-- <el-row id="echartlist">
      <div class="echartlist-top">
        <div class="echartlist-tiele">
          <img src="../../assets/img/homeimg/home_icon_search@2x.png" alt />
          <span>数据概览</span>
          <span>提示：兑换商城订单包含积分的商品，按照交易统计时只能计算金额部分，积分不计算在内</span>
        </div>
      </div>
      <div class="achartslist-item">
        <div class="achertslist-one">
          <div class="achertslist-img">
            <img src="../../assets/img/homeimg/operation_icon_remit@2x.png" alt />
          </div>
          <div class="achertslist-name">
            <div>今日订单总数</div>
            <span>{{this.totalOrdersToday.totalOrdersToday}}</span>
          </div>
        </div>
        <div class="achertslist-one">
          <div class="achertslist-img">
            <img src="../../assets/img/homeimg/data_icon_sell_today@2x.png" alt />
          </div>
          <div class="achertslist-name">
            <div>今日销售总额</div>
            <span>￥{{this.totalSalesToday.totalSalesToday}}</span>
          </div>
        </div>

        <div class="achertslist-one">
          <div class="achertslist-img">
            <img src="../../assets/img/homeimg/data_icon_sell_yesterday@2x.png" alt />
          </div>
          <div class="achertslist-name">
            <div>昨日销售总额</div>
            <span>￥{{this.totalSalesYesterday.totalSalesYesterday}}</span>
          </div>
        </div>

        <div class="achertslist-one">
          <div class="achertslist-img">
            <img src="../../assets/img/homeimg/data_icon_sell_7day@2x.png" alt />
          </div>
          <div class="achertslist-name">
            <div>近七天销售总额</div>
            <span>￥{{this.totalSalesInRecent7Days.totalSalesInRecent7Days}}</span>
          </div>
        </div>
      </div>

      <div class="goodstabstwo">
        <ul>
          <li>
            <input id="tab2" type="radio" name="tab" />
            <label for="tab2">兑换商城</label>
            <div class="content">
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list2.addGoods}}</div>
                  <span>新增商品</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list2.addGoodsChainRatio)"
                    width="168"
                    background="rgba(229,229,229,1)"
                  ></el-progress>
                </div>
              </div>
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list2.allGoods}}</div>
                  <span>已经上架</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list2.allGoodsChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list2.stockShortage}}</div>
                  <span>库存紧张</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list2.stockShortageChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list2.upperShelf}}</div>
                  <span>全部商品</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list2.upperShelfChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>
            </div>
          </li>
          <li>
            <input id="tab1" type="radio" name="tab" checked />
            <label for="tab1">福利商城</label>
            <div class="content">
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list1.addGoods}}</div>
                  <span>新增商品</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list1.addGoodsChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>

              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list1.allGoods}}</div>
                  <span>已经上架</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list1.allGoodsChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list1.stockShortage}}</div>
                  <span>库存紧张</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list1.stockShortageChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>
              <div class="tabblefourone">
                <div class="tabletitletwo">
                  <div>{{this.list1.upperShelf}}</div>
                  <span>全部商品</span>
                </div>
                <div class="tablebox">
                  <el-progress
                    type="circle"
                    :percentage="(this.list1.upperShelfChainRatio)"
                    width="168"
                  ></el-progress>
                </div>
              </div>
            </div>
          </li>

          <li>
            <img src="../../assets/img/homeimg/home_icon_search@2x.png" alt />
            <span>商品</span>
          </li>
        </ul>
      </div> -->
      <!-- 用户模块功能组件的开发-->
      <!-- <div class="usermocketitem">
        <div class="usernametitle">
          <img src="../../assets/img/homeimg/home_icon_search@2x.png" alt />
          <span>用户</span>
        </div>
        <div class="userpushclick">
          <a href="https://www.umeng.com">
            <button>友盟</button>
          </a>
        </div>
      </div>
    </el-row> -->
    <!-- 订单提示  饼图 折线图模功能模块 订单来源 平台订单各类型订单对比 各用户类型订单对比-->
    <!-- <el-row id="usermoket">
      <div class="usermoket-title">
        <img src="../../assets/img/homeimg/home_icon_data@2x.png" alt />
        <span>订单</span>
        <span>提示：兑换商品订单会或包含积分的商品，按照交易额统计时只计算金额部分，积分不计算在内</span>
      </div>
      <div class="usermoket-move"> -->
        <!-- 第一个图标组件包含下拉框 环形图  时间选项卡 -->
        <!-- <div class="usermoket-item">
          <div class="usermoket-goods">
            <span>{{orderSource}}</span>
          </div>
          <div class="threegoodstime">
            <el-cascader
              v-model="value"
              :options="options"
              :show-all-levels="false"
              size="mini"
              @change="handleChange0"
              id="OptionsOne"
            ></el-cascader>
            <el-cascader
              :options="valus"
              :show-all-levels="false"
              size="mini"
              v-model="selectedOptions"
              @change="handleChange1"
            ></el-cascader>
            <el-cascader
              :options="vallus"
              :show-all-levels="false"
              size="mini"
              @change="handleChange2"
            ></el-cascader>
          </div> -->
          <!-- 环形图 -->
          <!-- <div class="indexecharts">
            <div id="myChart" :style="{width: '496px', height: '303px'}"></div>
          </div> -->
          <!-- 时间选项卡组件 -->
          <!-- <div class="marktime" v-if="aaa">
            <p>组件值：{{ value1 }}</p>
            <el-date-picker
              id="shoushou"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              @change="pieone"
            ></el-date-picker>
          </div>
        </div> -->
        <!-- 第二个图表组件包含下拉框 环形图  时间选项卡 -->
        <!-- <div class="usermoket-item">
          <div class="usermoket-goods">
            <span>{{Platform}}</span>
          </div>
          <div class="threegoodstime">
            <el-cascader
              :options="options"
              :show-all-levels="false"
              size="mini"
              @change="handleChange3"
            ></el-cascader>
            <el-cascader
              :options="valus"
              :show-all-levels="false"
              size="mini"
              v-model="valuesetoptions"
              @change="handleChange4"
            ></el-cascader>
            <el-cascader
              :options="vallus"
              :show-all-levels="false"
              size="mini"
              @change="handleChange5"
            ></el-cascader>
          </div>
          <div class="indexecharts">
            <div id="myChart2" :style="{width: '496px', height: '303px'}"></div>
          </div>
          <div class="secode-block" v-if="bbb">
            <div class="block">
              <p>组件值：{{ value6 }}</p>
              <el-date-picker
                v-model="value6"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="pietwo"
              ></el-date-picker>
            </div>
          </div>
        </div> -->

        <!-- 第三个图标组件包含下拉框 环形图  时间选项卡 -->
        <!-- <div class="usermoket-item">
          <div class="usermoket-goods">
            <span>各用户类型订单占比{{per}}</span>
          </div>
          <div class="threegoodstime">
            <el-cascader
              :options="options"
              :show-all-levels="false"
              size="mini"
              @change="handleChange6"
            ></el-cascader>
            <el-cascader
              :options="valusus"
              :show-all-levels="false"
              size="mini"
              v-model="valuethreelist"
              @change="handleChange7"
            ></el-cascader>
            <el-cascader
              :options="vallus"
              :show-all-levels="false"
              size="mini"
              @change="handleChange8"
            ></el-cascader>
          </div>
          <div class="indexecharts">
            <div id="myChart3" :style="{width: '496px', height: '303px'}"></div>
          </div>
          <div class="three-block" v-if="ccc">
            <div class="block">
              <p>组件值：{{ value7 }}</p>
              <el-date-picker
                v-model="value7"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="piethree"
              ></el-date-picker>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 折线图的开发 -->
      <!-- <div id="echartseditor"> -->
        <!-- 第一个折线图的开发 -->
        <!-- <div class="echartseditorone">
          <div class="editornewsitem">
            <span>商城单量走势</span>
            <div class="editorrightone" @change="dropchangeone">
              <el-radio v-model="radio1" label="4">同比</el-radio>
              <el-radio v-model="radio1" label="8">环比</el-radio>
              <el-cascader
                :options="valushop"
                :show-all-levels="false"
                size="mini"
                @change="changehandone"
              ></el-cascader>
            </div>
          </div>
          <div id="editorone" :style="{width:'1100px',height:'400px'}"></div>
          <dir class="editorlistcheck">
            <div>
              <span class="bigminbox" :style="{background:'rgb(197, 64, 60)'}"></span>
              <span>福利商城</span>
            </div>
            <div>
              <span class="bigminbox" :style="{background:'rgb(95, 112, 123)'}"></span>
              <span>兑换商城</span>
            </div>
            <div>
              <span class="bigminbox" :style="{background:'rgb(97, 160, 168) '}"></span>
              <span>福利商城环比</span>
            </div>
            <div>
              <span class="bigminbox" :style="{background:'rgb(212, 130, 101)'}"></span>
              <span>兑换商城环比</span>
            </div>
          </dir>
        </div> -->
        <!-- 第二个折线图的开发 -->
        <!-- <div class="echartseditorone">
          <div class="editornewsitem">
            <span>联盟店单量走势</span>
            <div class="editorrightone" @change="changerediotwo">
              <el-radio v-model="radio2" label="3">同比</el-radio>
              <el-radio v-model="radio2" label="6">环比</el-radio>
              <el-cascader
                id="nextone"
                :options="valushop"
                :show-all-levels="false"
                size="mini"
                @change="changehandtwo"
              ></el-cascader>
            </div>
          </div>
          <div id="editortwo" :style="{width:'1100px',height:'400px'}"></div>
          <dir class="editorlistcheck">
            <div>
              <span class="bigminbox" :style="{background:'rgb(205, 90, 86)'}"></span>
              <span>线上订单同比</span>
            </div>
            <div>
              <span class="bigminbox" :style="{background:'rgb(47, 69, 84) '}"></span>
              <span>买单同比</span>
            </div>
            <div>
              <span class="bigminbox" :style="{background:'rgb(97, 160, 168) '}"></span>
              <span>线上订单</span>
            </div>
            <div>
              <span class="bigminbox" :style="{background:'rgb(216, 142, 116) '}"></span>
              <span>买单</span>
            </div>
          </dir>
        </div>
      </div>
    </el-row> -->
    <!-- 商品专栏  tabs 页面  柱状图开发-->
    <!-- <el-row id="shoppinggoodselement">
      <div class="shoppinggoods">
        <img src="../../assets/img/homeimg/home_icon_goods@2x (1).png" alt />
        <span>商品</span>
      </div>
      <Goods></Goods>
      <Volume></Volume>
    </el-row>
    <Other></Other>
    <Integral></Integral> -->
  </div>
</template>

<script>
import Echarts from "vue-echarts";
import Goods from "./goods";
import Volume from "./volume";
import Other from "./other";
import Integral from "./integral";
import Icon from "@/components/icon-svg/index.vue";

export default {
  components: {
    Goods,
    Volume,
    Other,
    Icon,
    Integral,
    "v-chart": Echarts
  },
  data() {
    return {
      userId: 0,
      show: true,
      radio1: "4",
      radio2: "3",
      checked1: false,
      checked2: true,
      selectedOptions: [],
      valuesetoptions: [],
      valuethreelist:[],
      value6: "",
      value7: "",
      aaa: false,
      bbb: false,
      ccc: false,
      value: "",
      msg: "",
      activeName: "first",
      chartLine: null,
      chartPie: null,
      removeStitches: [],
      statusChartPie: [],
      orderToday: 0,
      totalMembership: 0,
      sevenDaySales: 0,
      totalSalesYesterday: 0,
      totalSalesToday: 0,
      exchange: 0,
      welfare: 0,
      whole: 0,
      activeIndex: "1",
      activeIndex2: "1",
      key: 1,
      visitor: "",
      unShipped: "",
      notLogin: "",
      user: "",
      shopId: "",
      websock: null,
      totalCount: [],
      totalOrdersToday: "",
      totalSalesInRecent7Days: "",
      totalSalesToday: "",
      totalSalesYesterday: "",
      type: "",
      orderType: "",
      timeType: "",
      aTurnoverType: "",
      list1: [], //福利商城的数据
      list2: [], //兑换商城的数据，
      options: [
        {
          value: "parentgoods",
          label: "联盟店",
          index: 0
        },
        {
          value: "shoppinggoods",
          label: "商城订单",
          index: 1
        }
      ],
      valus: [
        {
          value: "senvendays",
          label: "近七天",
          index: 0
        },
        {
          value: "month",
          label: "一个月",
          index: 1
        },
        {
          value: "freetime",
          label: "自定义",
          index: 2
        }
      ],
      valusus: [
        {
          value: "senvendays",
          label: "近七天",
          index: 0
        },
        {
          value: "month",
          label: "一个月",
          index: 1
        },
        {
          value: "freetime",
          label: "自定义",
          index: 2
        }
      ],
      valushop: [
        {
          value: "senvendays",
          label: "近七天",
          index: 0
        },
        {
          value: "month",
          label: "一个月",
          index: 1
        },
        {
          value: "threemonth",
          label: "90天",
          index: 2
        }
      ],
      vallus: [
        {
          value: "danliang",
          label: "单量",
          index: 0
        },
        {
          value: "jiaoyie",
          label: "交易额",
          index: 1
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      orderSource: "订单来源", //来源
      Platform: "各平台订单类型订单占比",
      per: "各用户类型订单占比",
      orderType1: 1,
      timeType1: 1,
      aTurnoverType1: 1,
      type1: 1,
      type2: 2,
      orderType2: 1,
      timeType2: 1,
      aTurnoverType2: 1,
      type3: 3,
      orderType3: 1,
      timeType3: 1,
      aTurnoverType3: 1,
      myChart: "",
      myChart2: "",
      myChart3: "",
      type4: 1,
      timeType4: 1,
      timeType5: 1,
      yearOnYear: true,
      chainRatio: false,
      yearOnYeartwo: true,
      chainRatiotwo: false,
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: true,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "30",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: []
        }
      ],
      series1: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: true,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "30",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: []
        }
      ],
      series2: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: true,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "30",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: []
        }
      ],
      series4: [
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
        }
      ],
      name: "",
      dropname: "",
      droptime: "",
      dropitem: "",
      dropingname: "",
      dropingtime: "",
      dropingitem: "",
      listingtime: "", //dropingtime
      listingname: "", //dropingname
      listingitem: "", //dropingitem
      editorone: "",
      index: "",
      editortwo: "",
      type5: 2,
      series5: [
        {
          name: "线上订单同比",
          type: "line",
          stack: "总量",
          data: []
        },
        {
          name: "买单同比",
          type: "line",
          stack: "总量",
          data: []
        },
        {
          name: "线上订单",
          type: "line",
          stack: "总量",
          data: []
        },
        {
          name: "买单",
          type: "line",
          stack: "总量",
          data: []
        }
      ],
      leaguename: "",
      leaguetime: "",
      leagueitem: "",
      leagueingname: "",
      leagueingtime: "",
      leagueingitem: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    this.judgeUserId()
    // 页面创建生命周期函数
    // this.initWebSocket();
    this.morevalue();
    this.handleChange0(0);
    this.handleChange1(0);
    this.handleChange2(0);
    this.handleChange3(0);
    this.handleChange4(0);
    this.handleChange5(0);
    this.handleChange6(0);
    this.handleChange7(0);
    this.handleChange8(0);
    // this.initshijian();
    this.changehandone(0);
    this.dropchangeone(0);
    // this.changerediotwo(0);
    this.changehandtwo(0);
    this.parameter();
  },
  mounted() {
    if ("WebSocket" in window) {
      this.websocket = new WebSocket(
        "ws://localhost:8801/myproject/websocket/" + this.userName
      );
      this.initWebSocket();
    } else {
      alert("当前浏览器 Not support websocket");
    }
    this.changerediotwo(); //联盟店单量走势redio选择框时间
    this.getDataItem();
    this.getDataName();
    this.drawLine();
    this.drawLinetwo();
    this.drawLinethree();
    this.handleChange1();
    this.handleChange2();
    this.handleChange3();
    this.handleChange0();
    this.drawLineeditor();
    this.drawLineeditortwo();
    this.jump1();
    this.jump2();
    this.jump3();
    this.jump4();
    this.jump5();
    this.jump6();
    this.jump7();
    this.jump8();
    this.jump9();
    this.jump10();
    this.jump11();
    this.jump12();
    this.jump13();
    this.jump14();
    this.skip1();
    this.skip2();
    this.skip3();
    this.skip4();
    this.skip5();
    this.skip6();
    this.skip7();
    this.skip8();
    this.morevalue();
    this.ifthree();
    this.ifsecond();
    this.iffour();
    this.iffive();
    this.parameter();
    this.ifshopfour();
    this.handleChange4();
    this.handleChange5();
    this.handleChange6();
    this.percentage();
    this.changehandone();
    // this.changehandtwo();
    this.pieone(); //第一个饼图的时间选项卡
    this.pietwo(); //第二个饼图的时间选项卡
    this.piethree(); //第三个饼图的时间卡
    this.yearOnYeartwo(); //联盟店单量走势同比环比参数处理
    this.timeType5(); //联盟店单量走势时间选项参数值处理函数
  },
  updated() {
    this.changehandtwo(0);
    this.changehandone(0);
  },
  beforeDestroy() {
    this.onbeforeunload();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    // if (this.chartLine) {
    //   this.chartLine.resize()
    // }
    this.getDataList();
    this.getDataItem();
    this.getDataName();
    this.drawLine();
    this.drawLinetwo();
    this.drawLinethree();
    this.handleChange1();
    this.handleChange2();
    this.handleChange3();
    this.handleChange6();
    this.handleChange8();
    this.drawLineeditor();
    this.drawLineeditortwo();
    // this.initshijian();
    // this.percentage();
  },
  destroyed: function() {
    // 离开页面生命周期函数
    // this.websocketclose();
  },
  methods: {
    pietwo(value6) {
      var _that = this;
      this.morevalue(_that.value);

      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type2,
          orderType: _that.orderType2,
          timeType: _that.timeType2,
          aTurnoverType: _that.aTurnoverType2
        })
      })
        .then(({ data }) => {
          var typeNameListfive = [];
          var orderCountListfive = [];
          data.data.map(item => {
            typeNameListfive.push(item.typeName);
            var orderCountItemfive = {};
            orderCountItemfive.value = item.orderCount;
            orderCountItemfive.name = item.typeName;
            orderCountListfive.push(orderCountItemfive);
          });
          this.series1[0].data = orderCountListfive;
          if (data && data.code === 0) {
            this.myChart2.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListfive
              },
              series: this.series1
            });
          }
        })
        .catch(err => {
          console.log(err, "各平台订单类型订单占比加载失败第二个下拉框");
        });
    },
    pieone(value1) {
      //第一个饼图时间卡片
      var _that = this;
      this.morevalue(_that.value);
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type1,
          orderType: _that.orderType1,
          timeType: _that.timeType1,
          aTurnoverType: _that.aTurnoverType1
        })
      })
        .then(({ data }) => {
          console.log(data, "订单来源第二下拉框时间卡片加载成功");
          var typeNameListtwo = [];
          var orderCountListtwo = [];
          data.data.map(item => {
            typeNameListtwo.push(item.typeName);
            var orderCountItemtwo = {};
            orderCountItemtwo.value = item.orderCount;
            orderCountItemtwo.name = item.typeName;
            orderCountListtwo.push(orderCountItemtwo);
          });
          this.series[0].data = orderCountListtwo;
          if (data && data.code === 0) {
            this.myChart.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListtwo
              },
              series: this.series
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    piethree(value7) {
      var _that = this;
      this.morevalue(_that.value);
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type3,
          orderType: _that.orderType3,
          timeType: _that.timeType3,
          aTurnoverType: _that.aTurnoverType3
        })
      })
        .then(({ data }) => {
          var typeNameListeight = [];
          var orderCountListeight = [];
          data.data.map(item => {
            typeNameListeight.push(item.typeName);
            var orderCountItemeight = {};
            orderCountItemeight.value = item.orderCount;
            orderCountItemeight.name = item.typeName;
            orderCountListeight.push(orderCountItemeight);
          });
          this.series2[0].data = orderCountListeight;
          if (data && data.code === 0) {
            this.myChart3.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListeight
              },
              series: this.series2
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    dropchangeone(value) {
      //商城单量走势模块开发
      this.parameter(value);
      this.ifshopfour(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/querySingleQuantityTrend"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type4,
          timeType: _that.timeType4, //时间类型
          yearOnYear: _that.yearOnYear, //同比
          chainRatio: _that.chainRatio //环比
        })
      })
        .then(({ data }) => {
          var listingtime = [];
          var listingname = [];
          var listingitem = [];
          listingtime = data.data.time; //time
          data.data.list[0].map(item => {
            //name
            listingname.push(item.name);
          });
          //listingitem
          var listingbigone = []; //所有的orderCount
          var type01 = [];
          var type02 = [];
          var type03 = [];
          var type04 = [];

          var listingbigtwo = []; //线上所有的salesVolume
          var type05 = [];
          var type06 = [];
          var type07 = [];
          var type08 = [];

          data.data.list[0].map((item, index) => {
            //orderCount
            // type01.push(item[0].orderCount);
            // type02.push(item[0].orderCount);
            // type03.push(item[0].orderCount);
            // type04.push(item[0].orderCount);
            type01.push(item.orderCount);
            type02.push(item.orderCount);
            type03.push(item.orderCount);
            type04.push(item.orderCount);
          });
          listingbigone[0] = type01;
          listingbigone[1] = type02;
          listingbigone[2] = type03;
          listingbigone[3] = type04;

          //listingbigone   所有的orderCount 的集合处理
          this.series4[0].data = listingbigone[0];
          this.series4[1].data = listingbigone[1];
          this.series4[2].data = listingbigone[2];
          this.series4[3].data = listingbigone[3];

          //操作salesVolume
          data.data.list[0].map((item, index) => {
            //操作salesVolume
            // type05.push(item[0].salesVolume);
            // type06.push(item[0].salesVolume);
            // type07.push(item[0].salesVolume);
            // type08.push(item[0].salesVolume);
            type05.push(item.salesVolume);
            type06.push(item.salesVolume);
            type07.push(item.salesVolume);
            type08.push(item.salesVolume);
          });

          listingbigtwo[0] = type05;
          listingbigtwo[1] = type06;
          listingbigtwo[2] = type07;
          listingbigtwo[3] = type08;

          //listingbigtwo 所有的线上所有的salesVolume 的集合处理
          this.series4[0].data = listingbigtwo[0];
          this.series4[1].data = listingbigtwo[1];
          this.series4[2].data = listingbigtwo[2];
          this.series4[3].data = listingbigtwo[3];

          this.series4.map((item, index) => {
            item.name = listingname[index];
          });
          if (data && data.code === 0) {
            this.Integralone.setOption({
              legend: {
                // data: listname
                data: listingname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                // data: listtime
                data: listingtime
              },
              series: this.series4
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    changehandone(value) {
      //商城单量走势模块开发
      this.parameter(value);
      this.ifshopfour(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/querySingleQuantityTrend"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type4,
          timeType: _that.timeType4, //时间类型
          yearOnYear: _that.yearOnYear, //同比
          chainRatio: _that.chainRatio //环比
        })
      })
        .then(({ data }) => {
          var dropname = [];
          var droptime = [];
          var dropitem = [];
          droptime = data.data.time; //底部时间
          data.data.list[0].map(item => {
            dropname.push(item.name);
          });
          // dropitem\
          var big = [];
          var type1 = []; //线上订单呢的所哟有income
          var type2 = [];
          var type3 = [];
          var type4 = [];
          data.data.list.map((item, idx) => {
            type1.push(item[0].orderCount);
            type2.push(item[0].orderCount);
            type3.push(item[0].orderCount);
            type4.push(item[0].orderCount);
          });
          big[0] = type1;
          big[1] = type2;
          big[2] = type3;
          big[3] = type4;
          this.series4.map((item, idx) => {
            item.name = dropname[idx];
          });
          this.series4[0].data = big[0];
          this.series4[1].data = big[1];
          this.series4[2].data = big[2];
          this.series4[3].data = big[3];
          if (data && data.code === 0) {
            this.editorone.setOption({
              legend: {
                data: dropname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: droptime
              },
              series: this.series4
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //联盟店单量走势时间下拉框获取数据函数
    changehandtwo(value) {
      this.ifshopfour(value);
      this.parameter(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/querySingleQuantityTrend"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type5,
          timeType: _that.timeType5, //时间类型
          yearOnYear: _that.yearOnYeartwo, //同比
          chainRatio: _that.chainRatiotwo //环比
        })
      }).then(({ data }) => {
        var leaguename = [];
        var leaguetime = [];
        var leagueitem = [];
        leagueitem;
        leaguetime = data.data.time; //底部时间
        data.data.list[0].map(item => {
          leaguename.push(item.name);
        });
        // leagueitem\
        var big = [];
        var type1 = []; //线上订单呢的所哟有income
        var type2 = [];
        var type3 = [];
        var type4 = [];
        data.data.list.map((item, idx) => {
          type1.push(item[0].orderCount);
          type2.push(item[0].orderCount);
          type3.push(item[0].orderCount);
          type4.push(item[0].orderCount);
        });
        big[0] = type1;
        big[1] = type2;
        big[2] = type3;
        big[3] = type4;
        this.series5.map((item, idx) => {
          item.name = leaguename[idx];
        });
        this.series5[0].data = big[0];
        this.series5[1].data = big[1];
        this.series5[2].data = big[2];
        this.series5[3].data = big[3];

        if (data && data.code === 0) {
          this.editortwo.setOption({
            legend: {
              data: leaguename
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: leaguetime
            },
            series: this.series5
          });
        }
      });
    },
    changerediotwo(value) {
      //联盟店单量走势单选框数据加载函数
      this.parameter(value);
      this.ifshopfour(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/querySingleQuantityTrend"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type5,
          timeType: _that.timeType5, //时间类型
          yearOnYear: _that.yearOnYeartwo, //同比
          chainRatio: _that.chainRatiotwo //环比
        })
      })
        .then(({ data }) => {
          var leagueingtime = [];
          var leagueingname = [];
          var leagueingitem = [];
          leagueingtime = data.data.time; //time
          data.data.list[0].map(item => {
            //name
            leagueingname.push(item.name);
          });
          //leagueingitem
          var listingbigone = []; //所有的orderCount
          var type01 = [];
          var type02 = [];
          var type03 = [];
          var type04 = [];

          var listingbigtwo = []; //线上所有的salesVolume
          var type05 = [];
          var type06 = [];
          var type07 = [];
          var type08 = [];

          data.data.list[0].map((item, index) => {
            //orderCount
            type01.push(item[0].orderCount);
            type02.push(item[0].orderCount);
            type03.push(item[0].orderCount);
            type04.push(item[0].orderCount);
          });
          listingbigone[0] = type01;
          listingbigone[1] = type02;
          listingbigone[2] = type03;
          listingbigone[3] = type04;

          //listingbigone   所有的orderCount 的集合处理
          this.series5[0].data = listingbigone[0];
          this.series5[1].data = listingbigone[1];
          this.series5[2].data = listingbigone[2];
          this.series5[3].data = listingbigone[3];

          //操作salesVolume
          data.data.list[0].map((item, index) => {
            //操作salesVolume
            type05.push(item[0].salesVolume);
            type06.push(item[0].salesVolume);
            type07.push(item[0].salesVolume);
            type08.push(item[0].salesVolume);
          });

          listingbigtwo[0] = type05;
          listingbigtwo[1] = type06;
          listingbigtwo[2] = type07;
          listingbigtwo[3] = type08;
          //listingbigtwo 所有的线上所有的salesVolume 的集合处理
          this.series5[0].data = listingbigtwo[0];
          this.series5[1].data = listingbigtwo[1];
          this.series5[2].data = listingbigtwo[2];
          this.series5[3].data = listingbigtwo[3];

          this.series5.map((item, index) => {
            item.name = leagueingname[index];
          });

          if (data && data.code === 0) {
            this.editortwo.setOption({
              legend: {
                data: leagueingname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: leagueingtime
              },
              series: this.series5
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //商城单量走势 联盟店单量走势 单选框参数处理事件
    parameter(value) {
      var _that = this;
      var index;
      if (value == 4) {
        _that.yearOnYear = true;
        _that.chainRatio = false;
      }
      if (value == 8) {
        _that.yearOnYear = false;
        _that.chainRatio = true;
      }
      if (value == 3) {
        _that.yearOnYeartwo = true;
        _that.chainRatiotwo = false;
      }
      if (value == 6) {
        _that.yearOnYeartwo = false;
        _that.chainRatiotwo = true;
      }
    },
    //商城单量走势 联盟店单量走势 参数处理
    ifshopfour(value) {
      var _that = this;
      var index;
      if (value == "senvendays") {
        _that.timeType4 = 1;
        _that.timeType5 = 1;
      }
      if (value == "month") {
        _that.timeType4 = 2;
        _that.timeType5 = 2;
      }
      if (value == "threemonth") {
        _that.timeType4 = 3;
        _that.timeType5 = 3;
      }
    },
    //4个参数的处理逻辑 公用函数
    morevalue(value) {
      var index;
      var _that = this;
      if (value == "orderSource") {
        _that.type1 = 1;
        _that.type2 = 1;
        _that.type3 = 1;
      }
      if (value == "Platform") {
        _that.type1 = 2;
        _that.type2 = 2;
        _that.type3 = 2;
      }
      if (value == "per") {
        _that.type1 = 3;
        _that.type2 = 3;
        _that.type3 = 3;
      }
      if (value == "parentgoods") {
        _that.orderType1 = 1;
        _that.orderType2 = 1;
        _that.orderType3 = 1;
      }
      if (value == "shoppinggoods") {
        _that.orderType1 = 2;
        _that.orderType2 = 2;
        _that.orderType3 = 2;
      }
      if (value == "senvendays") {
        _that.timeType1 = 1;
        _that.timeType2 = 1;
        _that.timeType3 = 1;
      }
      if (value == "month") {
        _that.timeType1 = 2;
        _that.timeType2 = 2;
        _that.timeType3 = 2;
      }
      if (value == "freetime") {
        _that.timeType1 = _that.value1[0] + "~" + _that.value1[1];
        _that.timeType2 = _that.value6[0] + "~" + _that.value6[1];
        _that.timeType3 = _that.value7[0] + "~" + _that.value7[1];
      }
      if (value == "danliang") {
        _that.aTurnoverType1 = 1;
        _that.aTurnoverType2 = 1;
        _that.aTurnoverType3 = 1;
      }
      if (value == "jiaoyie") {
        _that.aTurnoverType1 = 2;
        _that.aTurnoverType2 = 2;
        _that.aTurnoverType3 = 2;
      }
    },
    iffive(value) {
      if (value == "jiaoyie") {
        this.ccc = false;
      }
      if (value == "danliang") {
        this.ccc = false;
      }
      if (value == "shoppinggoods") {
        this.ccc = false;
      }
      if (value == "parentgoods") {
        this.ccc = false;
      }
      if (value == "senvendays") {
        this.ccc = false;
      }
      if (value == "month") {
        this.ccc = false;
      }
      if (value == "freetime") {
        this.ccc = !this.ccc;
      } else {
        this.ccc = this.ccc;
      }
    },
    ifsecond(value) {
      if (value == "jiaoyie") {
        this.bbb = false;
      }
      if (value == "danliang") {
        this.bbb = false;
      }
      if (value == "shoppinggoods") {
        this.bbb = false;
      }
      if (value == "parentgoods") {
        this.bbb = false;
      }
      if (value == "senvendays") {
        this.bbb = false;
      }
      if (value == "month") {
        this.bbb = false;
      }
      if (value == "freetime") {
        this.bbb = !this.bbb;
      } else {
        this.bbb = this.bbb;
      }
    },
    ifthree(value) {
      //控制时间选项卡
      if (value == "jiaoyie") {
        this.aaa = false;
      }
      if (value == "danliang") {
        this.aaa = false;
      }
      if (value == "shoppinggoods") {
        this.aaa = false;
      }
      if (value == "parentgoods") {
        this.aaa = false;
      }
      if (value == "senvendays") {
        this.aaa = false;
      }
      if (value == "month") {
        this.aaa = false;
      }
      if (value == "freetime") {
        this.aaa = !this.aaa;
      } else {
        this.aaa = this.aaa;
      }
    },
    handleChange8(value) {
      this.morevalue(value);
      this.iffive(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type3,
          orderType: _that.orderType3,
          timeType: _that.timeType3,
          aTurnoverType: _that.aTurnoverType3
        })
      })
        .then(({ data }) => {
          var typeNameListnine = [];
          var orderCountListnine = [];
          data.data.map(item => {
            typeNameListnine.push(item.typeName);
            var orderCountItemnine = {};
            orderCountItemnine.value = item.orderCount;
            orderCountItemnine.name = item.typeName;
            orderCountListnine.push(orderCountItemnine);
          });
          this.series2[0].data = orderCountListnine;
          if (data && data.code === 0) {
            this.myChart3.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListnine
              },
              series: this.series2
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange7(value) {
      this.morevalue(value);
      this.iffive(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type3,
          orderType: _that.orderType3,
          timeType: _that.timeType3,
          aTurnoverType: _that.aTurnoverType3
        })
      })
        .then(({ data }) => {
          var typeNameListeight = [];
          var orderCountListeight = [];
          data.data.map(item => {
            typeNameListeight.push(item.typeName);
            var orderCountItemeight = {};
            orderCountItemeight.value = item.orderCount;
            orderCountItemeight.name = item.typeName;
            orderCountListeight.push(orderCountItemeight);
          });
          this.series2[0].data = orderCountListeight;
          if (data && data.code === 0) {
            this.myChart3.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListeight
              },
              series: this.series2
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange6(value) {
      this.morevalue(value);
      this.iffive(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type3,
          orderType: _that.orderType3,
          timeType: _that.timeType3,
          aTurnoverType: _that.aTurnoverType3
        })
      })
        .then(({ data }) => {
          var typeNameListseven = [];
          var orderCountListseven = [];
          data.data.map(item => {
            typeNameListseven.push(item.typeName);
            var orderCountItemseven = {};
            orderCountItemseven.value = item.orderCount;
            orderCountItemseven.name = item.typeName;
            orderCountListseven.push(orderCountItemseven);
          });
          this.series2[0].data = orderCountListseven;
          if (data && data.code === 0) {
            this.myChart3.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListseven
              },
              series: this.series2
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange5(value) {
      this.morevalue(value);
      this.ifsecond(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type2,
          orderType: _that.orderType2,
          timeType: _that.timeType2,
          aTurnoverType: _that.aTurnoverType2
        })
      })
        .then(({ data }) => {
          var typeNameListsix = [];
          var orderCountListsix = [];
          data.data.map(item => {
            typeNameListsix.push(item.typeName);
            var orderCountItemsix = {};
            orderCountItemsix.value = item.orderCount;
            orderCountItemsix.name = item.typeName;
            orderCountListsix.push(orderCountItemsix);
          });
          this.series1[0].data = orderCountListsix;
          if (data && data.code === 0) {
            this.myChart2.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListsix
              },
              series: this.series1
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange4(value) {
      this.value = value;
      this.ifsecond(value);
      var _that = this;
      this.morevalue(value);
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type2,
          orderType: _that.orderType2,
          timeType: _that.timeType2,
          aTurnoverType: _that.aTurnoverType2
        })
      })
        .then(({ data }) => {
          var typeNameListfive = [];
          var orderCountListfive = [];
          data.data.map(item => {
            typeNameListfive.push(item.typeName);
            var orderCountItemfive = {};
            orderCountItemfive.value = item.orderCount;
            orderCountItemfive.name = item.typeName;
            orderCountListfive.push(orderCountItemfive);
          });
          this.series1[0].data = orderCountListfive;
          if (data && data.code === 0) {
            this.myChart2.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListfive
              },
              series: this.series1
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange3(value) {
      this.morevalue(value);
      this.ifsecond(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type2,
          orderType: _that.orderType2,
          timeType: _that.timeType2,
          aTurnoverType: _that.aTurnoverType2
        })
      })
        .then(({ data }) => {
          var typeNameListfour = [];
          var orderCountListfour = [];
          data.data.map(item => {
            typeNameListfour.push(item.typeName);
            var orderCountItemfour = {};
            orderCountItemfour.value = item.orderCount;
            orderCountItemfour.name = item.typeName;
            orderCountListfour.push(orderCountItemfour);
          });
          this.series1[0].data = orderCountListfour;
          if (data && data.code === 0) {
            this.myChart2.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListfour
              },
              series: this.series1
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange0(value) {
      this.morevalue(value);
      this.ifthree(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type1,
          orderType: _that.orderType1,
          timeType: _that.timeType1,
          aTurnoverType: _that.aTurnoverType1
        })
      })
        .then(({ data }) => {
          var typeNameList = [];
          var orderCountList = [];
          data.data.map(item => {
            typeNameList.push(item.typeName);
            var orderCountItem = {};
            orderCountItem.value = item.orderCount;
            orderCountItem.name = item.typeName;
            orderCountList.push(orderCountItem);
          });
          this.series[0].data = orderCountList;
          if (data && data.code === 0) {
            this.myChart.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameList
                // data: []
              },
              series: this.series
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange2(value) {
      var _that = this;
      this.value = value;
      this.ifthree(value);
      this.morevalue(value);
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type1,
          orderType: _that.orderType1,
          timeType: _that.timeType1,
          aTurnoverType: _that.aTurnoverType1
        })
      })
        .then(({ data }) => {
          var typeNameListthree = [];
          var orderCountListthree = [];
          data.data.map(item => {
            typeNameListthree.push(item.typeName);
            var orderCountItemthree = {};
            orderCountItemthree.value = item.orderCount;
            orderCountItemthree.name = item.typeName;
            orderCountListthree.push(orderCountItemthree);
          });
          this.series[0].data = orderCountListthree;
          if (data && data.code === 0) {
            this.myChart.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListthree
              },
              series: this.series
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleChange1(value) {
      this.value = value;
      this.ifthree(value);
      var _that = this;
      this.morevalue(value);
      this.$http({
        url: this.$http.adornUrl("/home/queryOrderRingDiagram"),
        method: "get",
        params: this.$http.adornParams({
          type: _that.type1,
          orderType: _that.orderType1,
          timeType: _that.timeType1,
          aTurnoverType: _that.aTurnoverType1
        })
      })
        .then(({ data }) => {
          var typeNameListtwo = [];
          var orderCountListtwo = [];
          data.data.map(item => {
            typeNameListtwo.push(item.typeName);
            var orderCountItemtwo = {};
            orderCountItemtwo.value = item.orderCount;
            orderCountItemtwo.name = item.typeName;
            orderCountListtwo.push(orderCountItemtwo);
          });
          this.series[0].data = orderCountListtwo;
          if (data && data.code === 0) {
            this.myChart.setOption({
              legend: {
                orient: "vertical",
                x: "",
                top: "80",
                left: "390",
                data: typeNameListtwo
              },
              series: this.series
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    skip8(){
      this.$router.push({
        name:'shopping-comment'
      })
    },
    skip7(){
      this.$router.push({
          name:'shopping-comment'
      })
    },
    skip6(){
      this.$router.push({
        name:'shopping-comment'
      })
    },
    skip5() {
      this.$router.push({
        name: "cashaudit"
      });
    },
    skip4() {
      this.$router.push({
        name: "shoppingbusinessgoods"
      });
    },
    skip3() {
      this.$router.push({
        name: "shoppinguser"
      });
    },
    skip2() {
      this.$router.push({
        name: "shoppingorderreturn"
      });
    },
    skip1() {
      this.$router.push({
        name: "shoppingorderform"
      });
    },
    jump14() {
      this.$router.push({
        name: "cashaudit"
      });
    },
    jump13() {
      this.$router.push({
        name: "finance"
      });
    },
    jump12() {
      this.$router.push({
        name: "update-shopping-voucher"
      });
    },
    jump11() {
      this.$router.push({
        name: "shoppingorderform"
      });
    },
    jump10() {
      this.$router.push({
        name: "home-special"
      });
    },
    jump9() {
      this.$router.push({
        name: "upload-goods"
      });
    },
    jump8() {
      this.$router.push({
        name: "discount-record"
      });
    },
    jump7() {
      this.$router.push({
        name: "orderreturn"
      });
    },
    jump6() {
      this.$router.push({
        name: "revenue-log"
      });
    },
    jump5() {
      this.$router.push({
        name: "shoppingbusinessorders"
      });
    },
    jump4() {
      this.$router.push({
        name: "shoppingorderform"
      });
    },
    jump3() {
      this.$router.push({
        name: "consumer"
      });
    },
    jump2() {
      this.$router.push({
        name: "membership"
      });
    },
    jump1() {
      this.$router.push({
        name: "user"
      });
      console.log(111);
    },
    drawLineeditortwo() {
      this.series5[0].data = [];
      //第二个折线图
      this.editortwo = this.$echarts.init(document.getElementById("editortwo"));
      //绘制图表
      this.editortwo.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: ["线上订单同比", "买单同比", "线上订单", "买单"]
          data: []
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: this.series5
      });
    },
    drawLineeditor() {
      this.series4[0].data = [];
      this.editorone = this.$echarts.init(document.getElementById("editorone"));
      //绘制折线图
      this.editorone.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // data: ["福利商城", "兑换商城", "福利商城环比", "兑换商城环比"],
          data: []
        },
        grid: {
          left: "3%",
          right: "",
          bottom: "1%",
          top: "5%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: this.series4
      });
    },
    drawLinethree() {
      this.series2[0].data = [];
      this.myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      //绘制图表
      this.myChart3.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "",
          top: "80",
          left: "390",
          data: []
        },
        series2: this.series2
      });
    },
    drawLinetwo() {
      this.series1[0].data = [];
      this.myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      this.myChart2.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "",
          top: "80",
          left: "390",
          data: []
        },
        series1: this.series1
      });
    },
    drawLine() {
      this.series[0].data = [];
      this.myChart = this.$echarts.init(document.getElementById("myChart"));
      this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "",
          y: "",
          data: []
        },
        series: this.series
      });
    },
    getDataName() {
      this.$http({
        url: this.$http.adornUrl("/home/queryMallInformation"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.list1 = data.data[0];
          // this.list2 = data.data[1];
        } else {
        }
      });
    },

    getDataItem() {
      this.$http({
        url: this.$http.adornUrl("/home/queryDataOverview"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.totalOrdersToday = data.data;
          this.totalSalesToday = data.data;
          this.totalSalesInRecent7Days = data.data;
          this.totalSalesYesterday = data.data;
        } else {
        }
      });
    },

    handleSelect(key, keyPath) {
      this.key = key;
    },
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/home/queryToBeProcessed"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.totalCount = data.data;
        } else {
        }
      });
    },
    // initWebSocket: function() {
    //   // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https

    //   // this.websock = new WebSocket(`ws://localhost:8080/websocket/DPS007`)
    //   this.websock.onopen = this.websocketonopen;
    //   this.websock.onerror = this.websocketonerror;
    //   this.websock.onmessage = this.websocketonmessage;
    //   this.websock.onclose = this.websocketclose;
    //   window.onbeforeunload = this.onbeforeunload;
    // },
    // websocketonopen: function() {
    //   console.log("WebSocket连接成功");
    // },
    // websocketonerror: function(e) {
    //   console.log("WebSocket连接发生错误");
    // },
    // websocketonmessage: function(e) {
    //   var da = JSON.parse(e.data);
    //   console.log(da);
    //   this.message = da;
    // },
    // websocketclose: function(e) {
    //   console.log("connection closed (" + e.code + ")");
    // },
    judgeUserId () {
      this.userId = this.$store.state.user.id
      this.$http({
        url: this.$http.adornUrl('/home/queryAllUserId'),
        methods: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          if (data.data.length > 0) {
            for (var p = 0; p < data.data.length; p++) {
              if (this.userId === data.data[p]) {
                this.show = false
                  return
              }
            }
          }
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/scss/_homeeight.scss");
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.topworks {
  width: 100%;
  height: 48px;
  text-align: center;
  line-height: 48px;
  top: 0;
  background: rgba(242, 242, 242, 1);
  display: flex;
  border: 1px solid rgba(204, 204, 204, 1);
  border-bottom:1px solid rgba(242, 242, 242, 1);
}
.topworks > span {
  margin-left: 8px;
}
.chartlisteight {
  width: 100%;
  height: 338px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
}
.chartlisteight > div:hover {
  background: #eeeeee;
}

.chartlisteight > div {
  width: 288px;
  height: 120px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  float: left;
  border-radius: 2px;
  margin-left: 26px;
  margin-top: 32px;
  cursor: pointer;
}
.eighticon {
  width: 59px;
  height: 67px;
  margin-top: 27px;
  margin-left: 32px;
  float: left;
}
.eighticon > img {
  width: 100%;
  height: 100%;
}
.eightnumber {
  width: 120px;
  height: 60px;
  float: left;
  margin-top: 31px;
  margin-left: 40px;
  text-align: right;
}
.eightnumber > span {
  height: 23px;
  line-height: 23px;
  font-family: Arial;
  font-size: 30px;
  font-weight: bold;
  color: rgba(120, 196, 70, 1);
}
.eightnumber > div {
  margin-top: 10px;
  height: 27px;
  line-height: 27px;
}
.eightlook {
  text-align: center;
  line-height: 48px;
  height: 48px;
}
.eight-left {
  width: 100%;
  height: 300px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-top: 1px solid rgba(255, 255, 255, 1);
}
.eight-border {
  width: 84px;
  height: 92px;
  text-align: center;
  float: left;
  margin-left: 28px;
  margin-top: 35px;
  cursor: pointer;
}
.eight-border > div {
  width: 64px;
  height: 64px;
  margin-left: 10px;
}
.eight-border > div > img {
  width: 100%;
  height: 100%;
}

.eight-name {
  text-align: center;
  width: 84px;
  height: 18px;
  bottom: 0;
  float: left;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-top: 10px;
}
.el-card {
  padding: 0;
}
.el-popper {
  width: 120px;
  ul.el-cascader-menu {
    margin: 0;
    min-width: 120px;
    text-align: center;
    li {
      padding: 0;
      width: 120px;
      margin: 0;
    }
  }
}
.el-input {
  width: 120px;
}
.threegoodstime {
  width: 100%;
  height: 34px;
}

.el-cascader {
  margin-top: 3px;
  margin-left: 28px;
}
#cascader-menu-8766{
  max-width: 125px;
}
#nextone {
  // background: black;
}


.el-date-range-picker .el-picker-panel__body{
      min-width: 492px;
    background: white;
}




</style>

